//投资

var vm = new Vue({
	el: '#app',
	data: function() {
		return {
			dateTime: '',
			tztj: {
				cateArr: ['直接工程费', '动迁费', '其他费', '累计投资额'],
				data1: [],
				data2: [],
				data3: [],
				data4: [],

			},
			ydtj: {
				cateArr: ['一标段', '二标段', '三标段'],
				data1: [],
				data2: [],
				data3: []

			}

		}
	},
	mounted: function() {
		var that = this;
		mui.init();
		mui.ready(function() {
			//			loading.show()
			mui('#mainContent').scroll();
			$('.choseDate').on("tap", function() {
				var picker = new mui.DtPicker({
					type: 'year' //只显示年
				});
				picker.show(function(rs) {
					localStorage.setItem('investmentDate', rs.y.text);
					that.dateTime = localStorage.getItem('investmentDate') || rs.y.text;
					picker.dispose();
					//日期选择后的事件写在这
					that.getData(); //选择日期后请求数据
				})
			});
			$('.toggle-nav').on('tap', function() {
				mui('.mui-off-canvas-wrap').offCanvas('show');
			});
			var now = new Date();
			that.dateTime = now.getFullYear();
			that.getData(); //初始化请求数据
		});
	},
	methods: {
		//请求数据
		getData: function(year, callback) {
			var that = this;
			loading.show();
			var years = year || that.dateTime;
			$.getJSON('http://fhs.vhuomai.cn/getMonthMoney', {
				'year': years
			}, function(res) {
				that.tztj.data1 = res.data1;
				that.tztj.data2 = res.data2;
				that.tztj.data3 = res.data3;
				that.tztj.data4 = res.data4;

				that.ydtj.data1 = res.oneMoneyArray;
				that.ydtj.data2 = res.twoMoneyArray;
				that.ydtj.data3 = res.threeMoneyArray;
				that.initCharts();
				loading.hide();
			})
		},
		//渲染图表
		initCharts: function() {
			var that = this;
			//图表
			var myChart = echarts.init(document.getElementById('tztj'), 'macarons');
			var myChart2 = echarts.init(document.getElementById('ydtj'), 'macarons');

			var option = {
				backgroundColor: '#ffffff', //背景色
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
					//					,
					//					formatter:function(e){
					//						console.log(e)
					//						return ['a:'+e[0].data+'<br/>'+'b:'+e[1].data]
					//					}
				},
				legend: {
					data: that.tztj.cateArr,
					y: 'bottom',
				},
				grid: {
					x: 50,
					y:30,
					x2: 50,
					y1: 50,
					y2: 80
				},

				xAxis: [{
					type: 'category',
					data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
					axisPointer: {
						type: 'shadow'
					}
				}],
				yAxis: [{
						type: 'value',
						name: '月度投资(万元)',
						axisLabel: {
							formatter: '{value}'
						}
					},
					{
						type: 'value',
						name: '累计投资(万元)',
						axisLabel: {
							formatter: '{value}'
						}
					}
				],
				series: [{
						name: '直接工程费',
						type: 'bar',
						barWidth: 20,
						stack: '直接工程费',
						data: that.tztj.data1
					},
					{
						name: '动迁费',
						type: 'bar',
						barWidth: '10',
						stack: '直接工程费',
						data: that.tztj.data2
					},
					{
						name: '其他费',
						type: 'bar',
						barWidth: '10',
						stack: '直接工程费',
						data: that.tztj.data3
					},
					{
						name: '累计投资额',
						type: 'line',
						yAxisIndex: 1,
						data: that.tztj.data4
					}
				]
			};
			var option2 = {
				backgroundColor: '#ffffff', //背景色
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend: {
					data: that.ydtj.cateArr,
					y: 'bottom'
				},
				grid: {
					x: 50,
					y:30,
					x2: 50,
					y1: 0,
					y2: 50
				},
				xAxis: [{
					type: 'category',
					data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
				}],
				yAxis: [{
					type: 'value',
					name: '直接工程费(万元)',
						axisLabel: {
							formatter: '{value}'
						}
				}],
				series: [{
						name: '一标段',
						type: 'bar',
						barWidth: '5', //固定柱子宽度
						data: that.ydtj.data1
					},
					{
						name: '二标段',
						type: 'bar',
						barWidth: '5', //固定柱子宽度
						data: that.ydtj.data2
					},
					{
						name: '三标段',
						type: 'bar',
						barWidth: '5', //固定柱子宽度
						data: that.ydtj.data3
					}
				]
			};
			myChart.setOption(option);
			myChart2.setOption(option2);

		}

	}
})